<%@ page import="com.csnf.entity.Course" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/26
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>直播课堂管理系统</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
<h1>直播课堂管理系统</h1>
<input type="text" id="search" placeholder="搜索课程名称...">
<table>
  <thead>
  <tr>
    <th>编号</th>
    <th>课程名称</th>
    <th>章节</th>
    <th>开课时间</th>
    <th>结课时间</th>
    <th>讲师</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <% for (Course course : (List<Course>) request.getAttribute("courses")) { %>
  <tr>
    <td><%= course.getId() %></td>
    <td><%= course.getName() %></td>
    <td><%= course.getChapter() %></td>
    <td><%= course.getStartTime() %></td>
    <td><%= course.getEndTime() %></td>
    <td><%= course.getTeacher() %></td>
    <td><a href="#">删除</a></td>
  </tr>
  <% } %>
  </tbody>
</table>

<script>
  document.getElementById('search').addEventListener('input', function() {
    fetch('/api/courses')
            .then(response => response.json())
            .then(courses => {
              const searchValue = this.value.toLowerCase();
              const tbody = document.getElementById('course-list');
              tbody.innerHTML = '';
              courses.forEach(course => {
                if (course.name.toLowerCase().includes(searchValue)) {
                  const row = document.createElement('tr');
                  row.innerHTML = `
                                <td>${course.id}</td>
                                <td>${course.name}</td>
                                <td>${course.chapter}</td>
                                <td>${course.startTime}</td>
                                <td>${course.endTime}</td>
                                <td>${course.teacher}</td>
                                <td><a href="#">删除</a></td>
                            `;
                  tbody.appendChild(row);
                }
              });
            });
  });
</script>
</body>
</html>
